<template>
    <div>
        <el-tag v-if="type == accountType.GENERAL" type="info" size="mini" effect="dark">{{getAccountName(type)}}</el-tag>
        <el-tag v-if="type == accountType.ADMIN" size="mini" effect="dark">{{getAccountName(type)}}</el-tag>
        <el-tag v-if="type == accountType.SUPER_ADMIN" type="warning" size="mini" effect="dark">{{getAccountName(type)}}</el-tag>
        <el-tag v-if="type == accountType.SYSTEM_ADMIN" type="danger" size="mini" effect="dark">{{getAccountName(type)}}</el-tag>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import AccountType, { AccountTypeArray } from "../../lib/user/AccountType";
export default defineComponent({
    props: {
        type: {
            type: Number,
            default: 0,
        },
    },
    setup(props) {
        const accountType = AccountType;
        const accountTypeArray = AccountTypeArray;
        const getAccountName = (type: number): string => {
            let name = "";
            for (const item of accountTypeArray) {
                if (item.val === props.type) {
                    name = item.label;
                    break;
                }
            }
            return name;
        };
        return {
            accountType,
            accountTypeArray,
            getAccountName,
        };
    },
});
</script>

<style scoped lang="less"></style>
